import React,{useState, useEffect} from 'react';
import {List , Col ,Row , Modal,  Button, message } from 'antd';
import axios from 'axios';
import servicePath from '../config/api';
import '../static/css/ArticleList.css';

const {confirm} = Modal;

function ArticleList (porps) {
   const [list,setList] = useState([])
   
    //  第一次渲染DOM通过请求获得文章
   useEffect(()=>{
    getList()
   },[])
  
   const getList=()=>{
       axios({
          method : 'get',
          url : servicePath.getArticleList,
          withCredentials : true
       }).then(
           res=>{ 
            setList(res.data.list)
           }
       )   
   }
   //  删除文章
    const delArticle = (id) => {
        confirm({
            title: '确定要删除这篇文章吗',
            content: '点击 OK 按钮 文章将被永久删除,点击 Cancel取消本次操作',
            onOk() {
                axios(servicePath.delArticle+id, { withCredentials: true }).then(
                    res => {
                        message.success('文章删除成功')
                        getList()
                    }
                )

            },
            onCancel() {
                message.success('文章仍然保留')
            }

        })
    }
   // 修改文章跳转方法
   const updateArticle = (id)=>{
       porps.history.push('/index/add/'+id)
   }
   return (
      <div>
          <List 
            header = {
                <Row className = "list-div">
                    <Col span = {8}>
                        <b>标题</b> 
                    </Col>
                    <Col span = {4}>
                        <b>类别</b> 
                    </Col>
                    <Col span = {4}>
                        <b>发布时间</b> 
                    </Col>
                    <Col span = {4}>
                        <b>浏览量</b> 
                    </Col>
                    <Col span = {4}>
                        <b>操作</b> 
                    </Col>
                </Row>
            }
            bordered 
            dataSource = {list}
            renderItem = {(item)=>(
                <List.Item>
                    <Row className="list-div">
                        <Col span={8}>
                            {item.title}
                        </Col>
                        <Col span={4}>
                        {item.typeName}
                        </Col>
                        <Col span={4}>
                            {item.addTime}
                        </Col>
                        <Col span={4}>
                        {item.view_count}
                        </Col>
                        <Col span={4}>
                           <Button type = 'primary' onClick={()=>{updateArticle(item.id)}}>修改</Button>
                           <Button  style={{marginLeft:'20px'}} onClick={()=>{delArticle(item.id)}}>删除</Button>
                        </Col>
                    </Row>
                </List.Item>
            )}
          />
      </div>
   )
}

export default ArticleList